<template>

	<view class="pices">
		<u-navbar  :is-back="false"  title="社区论坛" :background="background" title-color="#ffffff" back-icon-color="#ffffff"
		 :back-text-style="{color: '#fff'}" :border-bottom="false"></u-navbar>
		<scroll-view>
			<u-row>
				<u-col span="12">
					<!-- 最顶上背景及小区信息 -->
					<!-- 测试 -->
					<community :community="name" hover-stop-propagation></community>
					<!-- 背景及小区信息结束 -->
					<!-- 讨论帖开始页 -->

					<!-- 分类导航 -->
					<u-sticky>
						<u-row style="background-color: #fff;">
							<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
							<u-col span="6">
								<u-subsection v-if="change" :bold="bold" :active-color="activeColor" :current="current" :mode="mode" :list="['最新发布', '最新回复']"
								 @change="mychange"></u-subsection>
							</u-col>
						</u-row>
					</u-sticky>
					<!-- 帖子列表 -->
					<disscussion v-for="(item,index) in disscussions" :key="item.id" :disscussions="item" :ulike="ulike" hover-stop-propagation @showc="showcomment" @shows="showshare"
					 @showt="showToast" @showi="showitem"></disscussion>
				</u-col>
			</u-row>
		</scroll-view>

		<!-- 转发弹出层 -->
		<view>
			<u-popup v-model="showf" mode="bottom" length="40%">
				<u-row>
					<u-col span="12">
						<u-row>
							<u-col span="2"><text style="color: #FFFFFF;">1</text></u-col>
							<u-col span="8">
								<u-divider color="#6d6d6d" half-width="200" border-color="#6d6d6d" height="80" style="margin-bottom: 100rpx;">分享给你的好友吧</u-divider>
							</u-col>
							<u-col span="2"></u-col>
						</u-row>
						<u-row>
							<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
							<u-col span="2">
								<u-icon name="weixin-circle-fill" size="100" color="#18b566" @click="weixinshare"></u-icon>
							</u-col>
							<u-col span="2">
								<u-icon name="moments" size="90" color="#18b566"></u-icon>
							</u-col>
							<u-col span="2">
								<u-icon name="weibo" size="100" color="#fab6b6"></u-icon>
							</u-col>
							<u-col span="2">
								<u-icon name="qq-fill" size="100" color="#2979ff"></u-icon>
							</u-col>
							<u-col span="2">
								<u-icon name="share-fill" size="100" color="#fcbd71" @click="linkshare"></u-icon>
							</u-col>
							<u-col span="1"></u-col>
						</u-row>
						<u-row>
							<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
							<u-col span="2" class="centertext">微信</u-icon>
							</u-col>
							<u-col span="2" class="centertext">朋友圈</u-icon>
							</u-col>
							<u-col span="2" class="centertext">微博</u-icon>
							</u-col>
							<u-col span="2" class="centertext">QQ好友</u-icon>
							</u-col>
							<u-col span="2" class="centertext">链接</u-icon>
							</u-col>
							<u-col span="1"></u-col>
						</u-row>
					</u-col>
				</u-row>
			</u-popup>
		</view>
		<!-- 转发弹出结束 -->
		
		
		<!-- 新建帖子按钮 -->
		<uni-fab @fabClick="newdiscussion" :popMenu="false" horizontal="right" :pattern="patterns"></uni-fab>
		<!-- 新建帖子结束 -->
		
		
		<!-- 点赞弹出层 -->
		<view>
			<u-toast ref="uToast" />
		</view>
		<!-- 点赞弹出结束 -->
	</view>
</template>

<script>
	import dessionlista from "../../components/dessionlist.vue"
	import communitya from "../../components/communitypage.vue"
	import uniFab from "@/components/uni-fab/uni-fab.vue"
	export default {
		data() {
			return {
				// 顶栏背景颜色
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'

				},
				// 导航按钮类型
				mode: 'subsection',
				// 导航按钮值
				current: 0,
				// 导航按钮颜色
				activeColor: this.$u.color['success'],
				bold: true,
				change: true,
				// 帖子列表数据
				disscussions: [],
				// 是否点击评论判断
				showc: false,
				// 是否点击转发判断
				showf: false,
				// 是否点击点赞判断
				showl: false,
				disindex: 0,
				// 评论列表
				comments: [],
				// 选中的帖子id
				choseId: "",
				// 用户点过赞的帖子id
				ulike: [],
				// 小区，还没做到登录，模拟一个
				name:"",
				// 新建帖子按钮颜色
				patterns: {
					"buttonColor": "#19be6b"
				},
				lim:0

			}
		},
		methods: {
			// 创建按钮
			newdiscussion() {
				if(this.$store.state.userInfo.isAttestation!=1){
					console.log("没有小区信息")
					this.$u.route("/pages/comm/userfullscreen")
					setTimeout(() => {
						uni.stopPullDownRefresh()
					}, 1000);
					return
				}
				
				console.log("创建")
				uni.navigateTo({
					url:"newone"
				})

			},
			// 按照最新回复还是最新发布排序
			mychange(e) {
				if(this.$store.state.userInfo.isAttestation!=1){
					console.log("没有小区信息")
					this.$u.route("/pages/comm/userfullscreen")
					setTimeout(() => {
						uni.stopPullDownRefresh()
					}, 1000);
					return
				}
				
				this.lim=e;
				uni.request({
					url: this.baseurl + "cDiscussion/selectAllDiscussion",
					data: {
						community: this.$store.state.userInfo.community,
						limit: e
					},
					success: res => {
						console.log(res.data);
						this.disscussions = res.data;
					}
				});
			},
			// 初始化获取数据
			getReplyListData() {
				if(this.$store.state.userInfo.isAttestation!=1){
					console.log("没有小区信息")
					this.$u.route("/pages/comm/userfullscreen")
					setTimeout(() => {
						uni.stopPullDownRefresh()
					}, 1000);
					return
				}
				
				// console.log("获取数据")
				uni.request({
					url: this.baseurl + "cDiscussion/selectAllDiscussion",
					data: {
						community: this.$store.state.userInfo.community,
						limit: this.lim
					},
					success: res => {
						console.log(res.data);
						this.disscussions = res.data;
					}
				});
			},
			//进入到详情页，
			showcomment(id) {
				uni.navigateTo({
					url: "dessionitem?id=" + id,
				})
			},
			// 点击到帖子其他地方进入详情
			showitem(id) {
				uni.navigateTo({
					url: "dessionitem?id=" + id,
				})
			},

			//分享弹窗
			showshare(id) {
				console.log(id);

				// this.baseUrl=window.location.host;
				// console.log(this.baseUrl)
				this.choseId = id;
				this.showf = true;
			},
			//分享微信
			weixinshare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://192.168.10.86:8080/#/",
					title: "uni-app分享",
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
					success: function(res) {
						uni.request({
							url: this.baseurl + "cDiscussion/addshare?id=" + this.choseId,
							success: (res) => {
								console.log(res);
							}

						});
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});


			},
			//分享链接
			linkshare() {
				uni.setClipboardData({
					data: this.baseurl + "#/pages/comm/dessionitem?id=" + this.choseId,
					success: (res) => {
						uni.request({
							url: this.baseurl + "cDiscussion/addshare?id=" + this.choseId,
							success: (res) => {
								console.log(res);
							}

						});
						console.log(res)
						this.showf = false;
					}
				})
				uni.request({
					url: this.baseurl + "cDiscussion/addshare?id=" + this.choseId,
					success: (res) => {
						console.log(res);
					}

				})
			},
			// 点赞
			showToast(id) {
				for (let i = 0; i < this.ulike.length; i++) {
					// 判断是否是已经有过点赞
					if (id == this.ulike[i].discussionId) {
						// 已有点赞，取消这个点赞
						uni.request({
							url: this.baseurl + "cUserlikes/userlike",
							data: {
								userId: this.$store.state.userInfo.id,
								discussionId: id,
								commentId: 0
							},
							method: "DELETE",
							success: (res) => {
								// 成功以后更新数据
								console.log(res);
								this.userlikes();
								this.getReplyListData();
							}
						})

						this.$refs.uToast.show({
							title: '取消赞成功',
							type: 'error'
						})
						// 结束方法
						return
					}
				}
				// 没有点赞过，进行点赞
				uni.request({
					url: this.baseurl + "cUserlikes/userlike",
					data: {
						userId: this.$store.state.userInfo.id,
						discussionId: id,
						commentId: 0
					},
					method: "GET",
					success: (res) => {
						console.log(res);
						// 跟新当前的数据
						this.userlikes();
						this.getReplyListData();
					}
				})
				this.$refs.uToast.show({
					title: '点赞成功',
					type: 'success'
				})


			},
			// 获取点赞初始数据
			userlikes() {
				console.log("开始获取点赞");
				uni.request({
					url: this.baseurl + "cUserlikes/selectAllUserlike?userid="+this.$store.state.userInfo.id,
					data: {
						community: this.$store.state.userInfo.community
					},
					success: res => {
						console.log("点赞的方法2", res.data);
						this.ulike = res.data;
					}
				});
			}

		},
		filters: {
			// 日期过滤器
			datafmt(arg1) {
				var a = arg1 + "";
				return a.substring(5, 10);
			}
		},
		// 组件注册
		components: {
			
			disscussion: dessionlista,
			community: communitya,
			uniFab
		},
	
		// 顶部下拉刷新
		onPullDownRefresh: function() {

			// console.log("触发了刷新");
			this.name=this.$store.state.userInfo.village;
			this.getReplyListData();
			this.userlikes();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);

		},
		// 加载过程中进行数据初始化
		onLoad: function(option) {

			this.name=this.$store.state.userInfo.village;
			console.log("pageload")
			this.getReplyListData();
			this.userlikes();
		},
		onShow:function(){
			uni.$once("gotoattestation",function(data){
				if(data==1){
					uni.navigateTo({
						url:"../set/attestation"
					})
				}
			})
		}

	}
</script>

<style>
	.uni-padding-wrap {
		padding: 300upx;
		color: $u-type-warning;
	}


	.demo-layout {
		height: 300rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.imagehead {
		width: 150rpx;
		height: 150rpx;
		margin-top: 40rpx;
		border-radius: 30upx;

	}

	.pices {
		height: 100%;
	}

	text {
		word-wrap: break-word;
	}

	.centertext {
		text-align: center;
	}
</style>
